<template>
	<view>
		<MyItem
			name="修改头像" 
			iconFileName="setAvatar.png"
			iconBgc="#ED655F"
			:clickFun="openAvatarTypeFun"/>
		<MyItem 
			name="修改昵称" 
			iconFileName="setNickName.png"
			iconBgc="#65BFD1"
			:clickFun="openNickNameModalFun"/>
		<MyItem 
			name="修改性别" 
			iconFileName="setSex.png"
			iconBgc="#F4AF69"
			:clickFun="openSexModalFun"/>
		<MyItem
			:name="phone" 
			iconFileName="phone.png"
			iconBgc="#479E80"
			:clickFun="openPhoneModalFun">
			<template v-if="phone!==PHONE_BTN" #rightBtn>
				<view 
					class="push_count" 
					@click.stop="()=>modelIsShowViewAdFlag=Math.random()" 
					:style="`color:${primary_hot_color}`"
				>
					剩余短信通知{{pushCount || 0}}次
					<MyIcons size="26rpx" :src="joinSystemPath('click1.png')" />
				</view>
			</template>
		</MyItem>
			
		<MyModal :openModalFlag="modalNickNameFlag" :okFun="submitNickName">
			<template #title>
				修改昵称
			</template>
			<template #content>
				<SetNickName :clickSubmitNickNameFlag="clickSubmitNickNameFlag"/>
			</template>
		</MyModal>
		<MyModal :openModalFlag="modelIsShowViewAdFlag" :okFun="okViewAdVideoFun" :cancelFun="cancelViewAdVideoFun">
			<template #title>
				观看15秒广告获取2次短信通知
			</template>
		</MyModal>
		<MyModal :openModalFlag="modalSexFlag" :okFun="submitSex">
			<template #title>
				修改性别
			</template>
			<template #content>
				<SetSex :clickSubmitSexFlag="clickSubmitSexFlag"/>
			</template>
		</MyModal>
		<MyPopub itemPadding="0rpx" height="200rpx" :isOpenPopub="openAvatarPopubFlag" :slotsNums="1">
			<template #1>
				<button type="default" class="choose_wx_avatar" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
					拉取微信头像
				</button>
			</template>
			<!-- <template #2>
				<button type="default" class="choose_wx_avatar" @click="uploadImg">
					自己上传头像
				</button>
			</template> -->
		</MyPopub>
	</view>
</template>

<script setup>
	import MyItem from '@/components/MyItem/MyItem.vue'
	import MyModal from '@/components/MyModal/MyModal.vue'
	import SetNickName from '@/components/User/SetNickName/SetNickName.vue'
	import MyPopub from '@/components/MyPopub/MyPopub.vue'
	import SetSex from '@/components/User/SetSex/SetSex.vue'
	import MyIcons from '@/components/MyIcons/MyIcons.vue'
	
	import { computed, nextTick, onDeactivated , ref} from "vue"
	import {
		onLoad
	} from '@dcloudio/uni-app'
	
	import {uploadImgHook} from '@/hooks/uploadImg.js'
	import {verifyIsLogin} from '@/hooks/verify.js'
	
	import {userStore} from '@/stores/user'
	import {UserModel} from '@/service/model/user.js'
	
	import {
		joinSystemPath
	} from '@/utils/imgJoinName.js'
	
	import {
		DefaultPhone
	} from '@/enum/GlobalEnum.js'
	
	import {
		dynamicStyleStore
	} from '@/stores/dynamicStyle.js'
	
	const dynamicStyle_store = dynamicStyleStore()
	
	const {
		primary_text_color,
		primary_hot_color
	} = dynamicStyle_store.dormitoryStyle
	
	const user_store = userStore()
	const userModel=new UserModel()
	
	const modalNickNameFlag = ref(0)
	const modalSexFlag = ref(0)
	const clickSubmitNickNameFlag = ref(0)
	const clickSubmitSexFlag = ref(0)
	const pushCount = ref(user_store.userInfo?.shortPushCount || 0)
	const modelIsShowViewAdFlag=ref(0)
	const isPrivacy = computed(()=>user_store.userInfo.isPrivacy)
	const PHONE_BTN='获取手机号'
	const phone = computed(
		()=>user_store.userInfo.phone === DefaultPhone
		? PHONE_BTN
		: (user_store.userInfo.phone || PHONE_BTN)
	)
	
	const onChooseAvatar=async(e)=>{
		openAvatarPopubFlag.value=-Math.random()
		
		const {avatarUrl}=e.detail
		verifyIsLogin()
		uploadImgHook("uploadAvatar",'/upload/avatar',avatarUrl)
	 }
	 const openAvatarPopubFlag=ref(0)
	 const openAvatarTypeFun=()=>{
		 verifyIsLogin()
		 uni.$emit('checkUserPrivacyProtocol')
		 if(!isPrivacy.value){
		     return
		 }
		openAvatarPopubFlag.value=Math.random()
	 }
	 
	 const okViewAdVideoFun=()=>{
		 const bindPhoneSuccess=async()=>{
			 modelIsShowViewAdFlag.value = -Math.random()
		 	const {data,success} = await userModel.patchUploadPushCount({})
		 	if(success){
		 		setTimeout(()=>{
		 			uni.$emit('tips',data,'success')
					pushCount.value=pushCount.value+2
		 		},1000)
		 	}
		 }
		 uni.$emit('viewVideoGoTask',bindPhoneSuccess)
	 }
	 const cancelViewAdVideoFun=()=>{
	 	uni.$emit('tips','每天我(开发者)要付出40元的成本去维护这个平台，广告是我唯一的补贴来源哦','info',3000)
	 	modelIsShowViewAdFlag.value = -Math.random()
	 }
	
	//监听图片上传成功
	uni.$on('uploadAvatar',function(data){
		openAvatarPopubFlag.value=-Math.random()
		;(()=>{
			if(data){
				user_store.setUserInfo({
					...user_store.userInfo,
					user_avatar:data
				})
			}
		})()
	})
	
	//图片上传
	const uploadImg=()=>{
		verifyIsLogin()
		uploadImgHook("uploadAvatar",'/upload/avatar')
	}
	
	//打开修改昵称弹窗
	const openNickNameModalFun=()=>{
		verifyIsLogin()
		uni.$emit('checkUserPrivacyProtocol')
		if(!isPrivacy.value){
		    return
		}
		modalNickNameFlag.value=Math.random()
	}
	//打开修改性别弹窗
	const openSexModalFun=()=>{
		verifyIsLogin()
		modalSexFlag.value=Math.random()
	}
	//打卡获取手机号的弹窗
	const openPhoneModalFun=()=>{
		verifyIsLogin()
		uni.$emit('checkUserPrivacyProtocol')
		if(!isPrivacy.value){
		    return
		}
		uni.$emit('openPhonePopubFlag',false,true)
	}
	
	//点击提交修改昵称
	const submitNickName=()=>{
		clickSubmitNickNameFlag.value = Math.random()
	}
	//点击提交修改性别
	const submitSex=()=>{
		clickSubmitSexFlag.value = Math.random()
	}
	
	onLoad(()=>{
		nextTick(()=>{
			uni.$emit('checkUserPrivacyProtocol')
		})
	})
	
	onDeactivated(()=>{
		uni.$off('uploadAvatar')
	})
</script>

<style lang="less">
	.choose_wx_avatar{
		margin: 0 !important;
		width: 100%;
		height: 100rpx;
		background-color: #FFFFFF !important;
		border: 0px solid #FFFFFF !important;
		font-size: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: v-bind(primary_text_color) !important;
	}
	button::after {
	   border: none;
	}
	.push_count{
		display: flex;
		font-size:26rpx;
		display:flex;
		align-items: center;
		color: v-bind(primary_hot_color);
		height: 120rpx;
	}
</style>